<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台 - AI检索功能</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
        }
        .main-content {
            height: calc(100vh - 60px);
            overflow-y: auto;
        }
        .nav-item {
            position: relative;
        }
        .nav-item:not(:last-child):after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
        }
        .chat-container {
            height: 500px;
            overflow-y: auto;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            background-color: #f8fafc;
        }
        .chat-message {
            max-width: 80%;
            margin-bottom: 1rem;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            line-height: 1.5;
        }
        .chat-message.user {
            background-color: #f0f9ff;
            border: 1px solid #bae6fd;
            margin-left: auto;
            border-top-right-radius: 0;
        }
        .chat-message.assistant {
            background-color: #fff;
            border: 1px solid #e2e8f0;
            margin-right: auto;
            border-top-left-radius: 0;
        }
        .typing-indicator {
            display: inline-block;
        }
        .typing-indicator span {
            height: 8px;
            width: 8px;
            float: left;
            margin: 0 1px;
            background-color: #9ca3af;
            display: block;
            border-radius: 50%;
            opacity: 0.4;
        }
        .typing-indicator span:nth-of-type(1) {
            animation: 1s blink infinite 0.3333s;
        }
        .typing-indicator span:nth-of-type(2) {
            animation: 1s blink infinite 0.6666s;
        }
        .typing-indicator span:nth-of-type(3) {
            animation: 1s blink infinite 0.9999s;
        }
        @keyframes blink {
            50% {
                opacity: 1;
            }
        }
        .reference-item {
            border-left: 3px solid #e11d48;
            padding-left: 12px;
            margin-top: 8px;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <nav class="bg-gradient-to-r from-red-600 to-red-800 shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="logo flex items-center">
                        <i class="fas fa-fire-extinguisher mr-2"></i>
                        <span>火灾调查知识库平台</span>
                    </div>
                </div>
                
                <div class="flex items-center space-x-1">
                    <a href="index.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-search mr-1"></i> 检索
                    </a>
                    <a href="knowledge-graph.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </a>
                    <a href="ai-search.html" class="nav-item text-white bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </a>
                    <a href="report-generator.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </a>
                    <a href="model-cockpit.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </a>
                    <a href="user-center.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user mr-1"></i> 个人中心
                    </a>
                    <a href="login.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-sign-in-alt mr-1"></i> 登录
                    </a>
                    <a href="register.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user-plus mr-1"></i> 注册
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 - AI检索页面 -->
    <div class="main-content container mx-auto px-4 py-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="mb-6">
                <h2 class="text-2xl font-bold text-gray-800">火调AI智能助手</h2>
                <p class="text-gray-600 mt-2">基于火灾调查知识库的智能问答系统，可以快速解答您关于火灾调查、法规标准等专业问题。</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧对话区域 -->
                <div class="lg:col-span-2">
                    <!-- 对话历史 -->
                    <div class="chat-container mb-4" id="chat-container">
                        <div class="chat-message assistant">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mr-3">
                                    <div class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center text-white">
                                        <i class="fas fa-robot"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900">火调AI助手</p>
                                    <p class="text-gray-700">您好！我是火调AI助手，可以为您解答关于火灾调查、消防法规、技术标准等方面的问题。请问有什么可以帮助您的？</p>
                                </div>
                            </div>
                        </div>

                        <div class="chat-message user">
                            <div class="flex items-start flex-row-reverse">
                                <div class="flex-shrink-0 ml-3">
                                    <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
                                        <i class="fas fa-user"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900">您</p>
                                    <p class="text-gray-700">电气火灾的主要原因有哪些？如何识别电气火灾？</p>
                                </div>
                            </div>
                        </div>

                        <div class="chat-message assistant">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mr-3">
                                    <div class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center text-white">
                                        <i class="fas fa-robot"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900">火调AI助手</p>
                                    <p class="text-gray-700">电气火灾的主要原因包括：</p>
                                    <ol class="list-decimal ml-5 my-2 text-gray-700">
                                        <li>电线短路：由于绝缘层破损、老化或机械损伤导致正负极直接接触</li>
                                        <li>过载：电流超过线路设计负荷，导致线路温度升高</li>
                                        <li>接触不良：接线端子松动，产生高阻点和高温</li>
                                        <li>绝缘老化：电线绝缘层随时间劣化，降低绝缘性能</li>
                                        <li>违规安装：不按规范进行电气安装，如私拉乱接电线</li>
                                    </ol>
                                    <p class="text-gray-700">识别电气火灾的方法：</p>
                                    <ol class="list-decimal ml-5 my-2 text-gray-700">
                                        <li>起火点痕迹：电气火灾通常在电气元件或线路处有明显的起火点</li>
                                        <li>融痕特征：短路处有金属熔珠、电线两端熔痕特征不同</li>
                                        <li>烧损路径：沿着电线或电气设备的分布路径呈现烧损</li>
                                        <li>特殊气味：有明显的电线绝缘层或电子元件燃烧的特殊气味</li>
                                        <li>火灾前兆：火灾前可能出现跳闸、电器异常发热或闪烁等现象</li>
                                    </ol>
                                    <div class="reference-item">
                                        <p class="text-xs text-gray-500">参考资料：《电气火灾调查与鉴定技术》（消防出版社，2022年）</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="typing-indicator" class="chat-message assistant" style="display: none;">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mr-3">
                                    <div class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center text-white">
                                        <i class="fas fa-robot"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900">火调AI助手</p>
                                    <div class="typing-indicator my-2">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 输入框 -->
                    <div class="flex items-center">
                        <div class="flex-1 relative">
                            <textarea id="user-input" rows="2" class="w-full pl-4 pr-10 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none" placeholder="请输入您的问题..."></textarea>
                            <div class="absolute right-2 bottom-2 flex space-x-1">
                                <button class="p-1 text-gray-500 hover:text-gray-700" title="上传文件">
                                    <i class="fas fa-paperclip"></i>
                                </button>
                                <button class="p-1 text-gray-500 hover:text-gray-700" title="上传图片">
                                    <i class="fas fa-image"></i>
                                </button>
                                <button class="p-1 text-gray-500 hover:text-gray-700" title="语音输入">
                                    <i class="fas fa-microphone"></i>
                                </button>
                            </div>
                        </div>
                        <button id="send-btn" class="ml-3 px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center">
                            <i class="fas fa-paper-plane mr-1"></i> 发送
                        </button>
                    </div>
                </div>

                <!-- 右侧功能区域 -->
                <div class="lg:col-span-1">
                    <!-- 对话模式 -->
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h3 class="font-semibold text-gray-700 mb-3">对话模式</h3>
                        <div class="space-y-2">
                            <button class="w-full px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700 flex items-center justify-center">
                                <i class="fas fa-comment-dots mr-1"></i> 通用问答
                            </button>
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-file-alt mr-1"></i> 文档解析
                            </button>
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-route mr-1"></i> 案例推理
                            </button>
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-book mr-1"></i> 法规咨询
                            </button>
                        </div>
                    </div>

                    <!-- 专家助手 -->
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h3 class="font-semibold text-gray-700 mb-3">专家助手</h3>
                        <div class="space-y-2">
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-bolt mr-1"></i> 电气火灾专家
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-fire-alt mr-1"></i> 燃气火灾专家
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-flask mr-1"></i> 化学品火灾专家
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-building mr-1"></i> 建筑火灾专家
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-balance-scale mr-1"></i> 消防法律顾问
                            </button>
                        </div>
                    </div>

                    <!-- 快捷问题 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="font-semibold text-gray-700 mb-3">热门问题</h3>
                        <div class="space-y-2">
                            <button class="w-full px-3 py-2 text-left text-sm bg-white border border-gray-200 rounded hover:bg-gray-50">
                                如何确定电气火灾的起火点？
                            </button>
                            <button class="w-full px-3 py-2 text-left text-sm bg-white border border-gray-200 rounded hover:bg-gray-50">
                                《消防法》关于火灾调查的主要规定？
                            </button>
                            <button class="w-full px-3 py-2 text-left text-sm bg-white border border-gray-200 rounded hover:bg-gray-50">
                                高层建筑火灾逃生注意事项有哪些？
                            </button>
                            <button class="w-full px-3 py-2 text-left text-sm bg-white border border-gray-200 rounded hover:bg-gray-50">
                                如何识别可疑纵火案件的特征？
                            </button>
                            <button class="w-full px-3 py-2 text-left text-sm bg-white border border-gray-200 rounded hover:bg-gray-50">
                                常见消防设施的故障原因分析
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sendBtn = document.getElementById('send-btn');
            const userInput = document.getElementById('user-input');
            const chatContainer = document.getElementById('chat-container');
            const typingIndicator = document.getElementById('typing-indicator');

            // 模拟发送消息并获取回复
            sendBtn.addEventListener('click', function() {
                const message = userInput.value.trim();
                if (message) {
                    // 添加用户消息
                    addUserMessage(message);
                    userInput.value = '';
                    
                    // 显示正在输入指示器
                    typingIndicator.style.display = 'block';
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                    
                    // 模拟延迟后获取AI回复
                    setTimeout(function() {
                        // 隐藏输入指示器
                        typingIndicator.style.display = 'none';
                        
                        // 添加AI回复 (示例回复)
                        let aiResponse;
                        if (message.includes('燃气') || message.includes('煤气')) {
                            aiResponse = `
                                <p class="text-gray-700">燃气火灾主要由以下原因引起：</p>
                                <ol class="list-decimal ml-5 my-2 text-gray-700">
                                    <li>燃气泄漏：管道接口松动、老化或破损导致燃气泄漏</li>
                                    <li>使用不当：操作不规范，如未关闭阀门或监管不当</li>
                                    <li>设备故障：燃气设备自身故障，如热电偶失效、阀门故障</li>
                                    <li>违规操作：私自改装燃气管道或设备</li>
                                    <li>通风不良：使用区域空气流通不畅，导致燃气聚集</li>
                                </ol>
                                <p class="text-gray-700">燃气火灾的预防措施：</p>
                                <ol class="list-decimal ml-5 my-2 text-gray-700">
                                    <li>定期检查燃气管道和设备，发现老化或损坏及时更换</li>
                                    <li>使用合格的燃气探测报警器，能及时发现燃气泄漏</li>
                                    <li>保持良好通风，使用燃气设备时确保空气流通</li>
                                    <li>规范操作，用气完毕及时关闭阀门</li>
                                    <li>不得私自改装燃气设施，必须由专业人员进行维修</li>
                                </ol>
                                <div class="reference-item">
                                    <p class="text-xs text-gray-500">参考资料：《燃气安全管理与火灾防控》（中国安全生产出版社，2023年）</p>
                                </div>
                            `;
                        } else {
                            aiResponse = `
                                <p class="text-gray-700">您的问题很有价值。基于我的知识库，我提供以下信息供参考：</p>
                                <p class="text-gray-700">火灾调查是确定火灾原因、分析火灾规律和提出防范措施的重要工作。调查过程中需要注意：</p>
                                <ol class="list-decimal ml-5 my-2 text-gray-700">
                                    <li>保护现场：保持火灾现场的完整性，避免破坏重要痕迹</li>
                                    <li>全面勘验：系统收集物证，拍照记录，绘制现场图</li>
                                    <li>询问调查：了解火灾发生、发展和扑救过程</li>
                                    <li>专业鉴定：对疑难问题进行专业技术鉴定</li>
                                    <li>综合分析：综合各方面信息，科学判断火灾原因</li>
                                </ol>
                                <p class="text-gray-700">如需更具体的信息，欢迎继续提问。</p>
                                <div class="reference-item">
                                    <p class="text-xs text-gray-500">参考资料：《火灾调查理论与实践》（消防出版社，2021年）</p>
                                </div>
                            `;
                        }
                        addAIMessage(aiResponse);
                    }, 2000);
                }
            });

            // 按下回车键发送消息
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendBtn.click();
                }
            });

            // 添加用户消息到对话框
            function addUserMessage(message) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'chat-message user';
                messageDiv.innerHTML = `
                    <div class="flex items-start flex-row-reverse">
                        <div class="flex-shrink-0 ml-3">
                            <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
                                <i class="fas fa-user"></i>
                            </div>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">您</p>
                            <p class="text-gray-700">${escapeHtml(message)}</p>
                        </div>
                    </div>
                `;
                
                typingIndicator.parentNode.insertBefore(messageDiv, typingIndicator);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            // 添加AI回复到对话框
            function addAIMessage(message) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'chat-message assistant';
                messageDiv.innerHTML = `
                    <div class="flex items-start">
                        <div class="flex-shrink-0 mr-3">
                            <div class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center text-white">
                                <i class="fas fa-robot"></i>
                            </div>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">火调AI助手</p>
                            ${message}
                        </div>
                    </div>
                `;
                
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            
            // 转义HTML特殊字符，防止XSS攻击
            function escapeHtml(unsafe) {
                return unsafe
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }

            // 点击热门问题时自动填充到输入框
            document.querySelectorAll('.bg-gray-50 button.w-full.text-left').forEach(btn => {
                btn.addEventListener('click', function() {
                    userInput.value = this.textContent.trim();
                    userInput.focus();
                });
            });
        });
    </script>
</body>
</html> 